@font-face {
    font-family: 'Regular';
    src: url('../font/Regular.woff') format('woff');
url('../font/Regular.ttf') format('truetype');
url('../font/Regular.svg') format('svg');
}
@font-face {
    font-family: 'Semibold';
    src: url('../font/Semibold.woff') format('woff');
url('../font/Semibold.ttf') format('truetype');
url('../font/Semibold.svg') format('svg');
}
@font-face {
    font-family: 'Thin';
    src: url('../font/Thin.woff') format('woff');
url('../font/Thin.ttf') format('truetype');
url('../font/Thin.svg') format('svg');
}
@keyframes xz {
    from{transform: rotate(360deg);
        transform-origin: 50% 50% 0px;}

}
body{background-image: url(../image/bj.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
}
#n1{position: relative;
    padding-top: .38rem;
}
#n1>span{font-size: .34rem;
    color: white;
    font-family: 'Regular';
}
#n1>p{font-size: .26rem;
    color: rgba(255,255,255,0.63);
    margin-top: .1rem;
}
#n1>img{width: .6rem;
    height: .6rem;
    position: absolute;
    top:.42rem;
    left: .32rem;
}
#n2{margin-top: .55rem;}
#n2>div{position: relative;}
#n2>img:nth-child(1){width: .48rem;
    height: .35rem;
    margin-bottom: .6rem;
    margin-right: .42rem;
}
#n2>div>img:nth-child(1){width: 4.63rem;
    height: 4.40rem;
}
#n2>img:nth-child(3){width: .48rem;
    height: .39rem;
    margin-bottom: .6rem;
    margin-left: .42rem;

}
#n2>div>img:nth-child(2){width: 3.04rem;
    height:3.04rem;
    position: absolute;
    top: 9%;
    left:19%;
    animation: xz 2s linear infinite;
}
#n2>div>img:nth-child(3){width: .96rem;
    height: .96rem;
    position: absolute;
    top: 30.5%;
    left:40.5%;
}
#n3{margin-top: .6rem;
    height: calc(100vh - 7.1rem);
    width: 100%;
    overflow-y: scroll;

}
#n3>div:nth-child(1){height: .42rem;
    background-color:rgba(255,255,255,0.08);
}
#n3>div:nth-child(1)>div{width: .75rem;
    height: .08rem;
    border-radius: .08rem;
    background-color:rgba(255,255,255,0.3);
}
.lb{padding:.32rem .42rem .32rem .26rem;
    position: relative;
    background-color:rgba(255,255,255,0.21);
    border-bottom: 4px solid rgba(255,255,255,0.11);
    height: 1.16rem;

}
.lb>div>img{width: .62rem;
    height: .62rem;
    margin-left: 0.12rem;
    display: none;
}
.lb:hover img{display: block}
.lb:hover>span:nth-child(2){display: none}
.lb:hover{ background-color:rgba(255,255,255,0)}
.lb>span:nth-child(2){font-size: .56rem;
    color: white;
    font-family: 'Thin';
    position: absolute;
    left: .56rem;
    display: block;
}
.gq{position: absolute;
    left: 1.16rem;
}
.gq>p{font-size: .34rem;
    color: white;
    font-family: 'Semibold';
}
.gq>span{font-size: .26rem;
    color:rgba(255,255,255,0.63);
    font-family: 'Regular';
}
.lb>span:nth-child(4){font-size: .26rem;
    color: white;
    font-family: 'Regular';
}
















